<template>
  <div class="page-title-wrapper">
    <h1 class="pagetitle__title">{{ cityName }}空气质量</h1>
    <h2 class="pagetitle__subtitle">
      {{ cityName }}空气质量指数（AQI）和PM2.5空气污染情况
    </h2>
    <p class="timestamp__wrapper">最后更新于{{ currentTime }}</p>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      cityName: "",
      currentTime: "",
    };
  },
  mounted() {
    this.getCity();
    this.getNowDate();
  },
  methods: {
    getCity() {
      // await this.$store.dispatch("detail/getIdCityList", this.$route.params.cityId);
      this.cityName = this.detailCityInfo[0].cityName;
    },

    getNowDate() {
      let year = new Date().getFullYear(); //获取当前时间的年份
      let month = new Date().getMonth() + 1; //获取当前时间的月份
      let day = new Date().getDate(); //获取当前时间的天数
      this.currentTime = " " + year + "年" + month + "月" + day + "日";
    },
  },
  computed: {
    //某个id城市信息
    ...mapState("detail", ["detailCityInfo"]),
  },
};
</script>

<style lang="less" scoped>
.page-title-wrapper {
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  width: 1440px;
  padding-right: 15px;
  padding-left: 15px;
  .pagetitle__title {
    font-weight: 700;
    font-size: 42px;
    margin-bottom: 6px;
    line-height: normal;
  }
  .pagetitle__subtitle {
    font-weight: 400;
    opacity: 0.9;
    font-size: 18px;
    line-height: 1.44;
    margin-bottom: 9px;
  }
  .timestamp__wrapper {
    color: #516072;
    font-size: 12px;
    height: 22px;
    line-height: 1.5;
  }
}
</style>